<div class="card">
  <div class="card-header">
    <div class="row">
      <div class="col col-md-6">
        <h5 class="card-title">库存主信息</h5>
      </div>
    </div>
  </div>
  
  <!-- 日期筛选按钮组 -->
  <div class="card-body border-bottom">
    <div class="btn-group mb-3">
      <button *ngFor="let option of dateFilterOptions" 
              class="btn" 
              [class.btn-primary]="option.active" 
              [class.btn-outline-primary]="!option.active" 
              (click)="onDateFilterChange(option)">
        {{ option.label }}
      </button>
    </div>
  </div>
  
  <!-- 搜索条件区域 -->
  <div class="card-body border-bottom">
    <form (ngSubmit)="search()">
      <div class="row mb-2">
        <div class="col-md-4">
          <div class="d-flex align-items-center mb-2">
            <label for="goodsCodeOrName" class="form-label mb-0 me-2" style="width: 80px;">货品:</label>
            <input type="text" id="goodsCodeOrName" class="form-control" [(ngModel)]="queryParams.GoodsCodeOrName" name="GoodsCodeOrName" placeholder="请输入货品名称/编号">
          </div>
        </div>
        
        <div class="col-md-4">
          <div class="d-flex align-items-center mb-2">
            <label for="goodsType" class="form-label mb-0 me-2" style="width: 80px;">货品类型:</label>
            <select class="form-select" id="goodsType" [(ngModel)]="queryParams.GoodsType" name="GoodsType">
              <option [ngValue]="null">请选择</option>
              <option *ngFor="let type of goodsTypeOptions" [value]="type">{{type}}</option>
            </select>
          </div>
        </div>
        
        <div class="col-md-4">
          <div class="d-flex align-items-center mb-2">
            <label for="unit" class="form-label mb-0 me-2" style="width: 80px;">单位:</label>
            <select class="form-select" id="unit" [(ngModel)]="queryParams.Unit" name="Unit">
              <option [ngValue]="null">请选择</option>
              <option *ngFor="let unit of unitOptions" [value]="unit">{{unit}}</option>
            </select>
          </div>
        </div>
      </div>
      
      <div class="row mb-2">
        <div class="col-md-4">
          <div class="d-flex align-items-center mb-2">
            <label for="warehouseName" class="form-label mb-0 me-2" style="width: 80px;">仓库名称:</label>
            <select class="form-select" id="warehouseName" [(ngModel)]="queryParams.WarehouseName" name="WarehouseName">
              <option [ngValue]="null">请选择</option>
              <option *ngFor="let warehouse of warehouseOptions" [value]="warehouse">{{warehouse}}</option>
            </select>
          </div>
        </div>
        
        <div class="col-md-4">
          <div class="d-flex align-items-center mb-2">
            <label for="barcode" class="form-label mb-0 me-2" style="width: 80px;">货品条码:</label>
            <input type="text" id="barcode" class="form-control" [(ngModel)]="queryParams.Barcode" name="Barcode" placeholder="请输入货品条码">
          </div>
        </div>
      </div>
      
      <div class="row mb-3">
        <div class="col-md-4">
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="checkbox" id="isDisabled" [(ngModel)]="queryParams.IsDisabled" name="IsDisabled">
            <label class="form-check-label" for="isDisabled">停用商品</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="checkbox" id="isZeroStock" [(ngModel)]="queryParams.IsZeroStock" name="IsZeroStock">
            <label class="form-check-label" for="isZeroStock">零库存商品</label>
          </div>
        </div>
        
        <div class="col-md-8 text-end">
          <button class="btn btn-secondary me-2" type="button" (click)="reset()">重置</button>
          <button class="btn btn-primary" type="submit">查询</button>
        </div>
      </div>
    </form>
  </div>
  
  <!-- 统计卡片区域 -->
  <div class="card-body border-bottom">
    <div class="row">
      <div class="col-md-4">
        <div class="card bg-light mb-3">
          <div class="card-body text-center">
            <div class="h3 text-primary">{{ statistics.totalStock }}</div>
            <div class="h4 text-warning">{{ statistics.totalAmount | currency:'￥' }}</div>
            <div class="text-muted">当前库存数量/金额</div>
          </div>
        </div>
      </div>
      
      <div class="col-md-4">
        <div class="card bg-light mb-3">
          <div class="card-body text-center">
            <div class="h3 text-primary">{{ statistics.totalInStock }}</div>
            <div class="h4 text-warning">{{ statistics.totalOutStock }}</div>
            <div class="text-muted">入库数量/出库数量</div>
          </div>
        </div>
      </div>
      
      <div class="col-md-4">
        <div class="card bg-light mb-3">
          <div class="card-body text-center">
            <div class="h3 text-primary">{{ statistics.totalPendingIn }}</div>
            <div class="h4 text-warning">{{ statistics.totalPendingOut }}</div>
            <div class="text-muted">待入库/待出库</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 操作按钮区域 -->
  <div class="card-body border-bottom">
    <button class="btn btn-secondary me-2" type="button" (click)="loadData()" [disabled]="loading || exporting">
      <i class="fa fa-refresh me-1"></i>刷新
    </button>
    <button class="btn btn-secondary" type="button" (click)="exportData()" [disabled]="loading || exporting || dataList.length === 0">
      <i class="fa fa-download me-1"></i>
      <span *ngIf="!exporting">导出</span>
      <span *ngIf="exporting">导出中...</span>
    </button>
  </div>
  
  <!-- 加载指示器 -->
  <div *ngIf="loading" class="card-body text-center">
    <div class="spinner-border text-primary" role="status">
      <span class="visually-hidden">加载中...</span>
    </div>
    <p class="mt-2">正在加载数据，请稍候...</p>
  </div>
  
  <!-- 数据表格区域 -->
  <div class="card-body" *ngIf="!loading">
    <div class="table-responsive">
      <table class="table table-striped table-hover">
        <thead>
          <tr>
            <th width="40"><input type="checkbox"></th>
            <th width="60">序号</th>
            <th>货品编号</th>
            <th>货品名称</th>
            <th>状态</th>
            <th>货品类型</th>
            <th>规格型号</th>
            <th>单位</th>
            <th>条码</th>
            <th>仓库名称</th>
            <th>当前库存</th>
            <th>库存金额</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of dataList; let i = index">
            <td><input type="checkbox"></td>
            <td>{{ i + 1 + (pageIndex - 1) * pageSize }}</td>
            <td>{{ item.goodsCode }}</td>
            <td>{{ item.goodsName }}</td>
            <td>{{ item.status }}</td>
            <td>{{ item.goodsType }}</td>
            <td>{{ item.specification }}</td>
            <td>{{ item.unit }}</td>
            <td>{{ item.barcode }}</td>
            <td>{{ item.warehouseName }}</td>
            <td>{{ item.currentStock }}</td>
            <td>{{ item.stockAmount | currency:'￥' }}</td>
            <td>
              <div class="btn-group">
                <button class="btn btn-sm btn-info me-1" type="button" [routerLink]="['/chu-ru-ku-liu-shui']" [queryParams]="{goodsCode: item.goodsCode}">
                  <i class="fa fa-list"></i> 出入库流水
                </button>
                <button class="btn btn-sm btn-success" type="button" (click)="handleStockDistribution(item)">
                  <i class="fa fa-cubes"></i> 库存分布
                </button>
              </div>
            </td>
          </tr>
          <tr *ngIf="dataList.length === 0">
            <td colspan="13" class="text-center py-3">暂无数据</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  
  <!-- 分页区域 -->
  <div class="card-footer" *ngIf="!loading && dataList.length > 0">
    <div class="row">
      <div class="col-md-6">
        <div class="pagination-info">
          当前显示 {{ total > 0 ? ((pageIndex - 1) * pageSize + 1) : 0 }} - {{ Math.min(pageIndex * pageSize, total) }} 条，总计 {{ total }} 条
        </div>
      </div>
      <div class="col-md-6">
        <div class="d-flex justify-content-end align-items-center">
          <div class="me-3">
            <label class="me-2">每页显示：</label>
            <select class="form-select form-select-sm d-inline-block" style="width: auto;"
                    [(ngModel)]="pageSize"
                    (change)="pageSizeChange($event.target.value)">
              <option *ngFor="let size of pageSizeOptions" [value]="size">{{ size }}</option>
            </select>
          </div>
          <nav aria-label="分页导航">
            <ul class="pagination pagination-sm mb-0">
              <li class="page-item" [class.disabled]="pageIndex === 1">
                <a class="page-link" href="javascript:;" (click)="pageIndexChange(1)">
                  <span aria-hidden="true">&laquo;&laquo;</span>
                </a>
              </li>
              <li class="page-item" [class.disabled]="pageIndex === 1">
                <a class="page-link" href="javascript:;" (click)="pageIndexChange(pageIndex - 1)">
                  <span aria-hidden="true">&laquo;</span>
                </a>
              </li>
              
              <li class="page-item" *ngFor="let page of [1,2,3,4,5] | slice:0:Math.ceil(total/pageSize > 5 ? 5 : Math.ceil(total/pageSize))" 
                  [class.active]="pageIndex === page">
                <a class="page-link" href="javascript:;" (click)="pageIndexChange(page)">{{ page }}</a>
              </li>
              
              <li class="page-item" [class.disabled]="pageIndex === Math.ceil(total/pageSize)">
                <a class="page-link" href="javascript:;" (click)="pageIndexChange(pageIndex + 1)">
                  <span aria-hidden="true">&raquo;</span>
                </a>
              </li>
              <li class="page-item" [class.disabled]="pageIndex === Math.ceil(total/pageSize)">
                <a class="page-link" href="javascript:;" (click)="pageIndexChange(Math.ceil(total/pageSize))">
                  <span aria-hidden="true">&raquo;&raquo;</span>
                </a>
              </li>
            </ul>
          </nav>
          <div class="ms-3 d-flex align-items-center" *ngIf="maxPageCount > 1">
            <span class="me-2">跳至</span>
            <input
              type="number"
              class="form-control form-control-sm"
              style="width: 60px;"
              min="1"
              [max]="maxPageCount"
              [(ngModel)]="inputPageNumber"
              (change)="onPageInputChange($event)"
              (keyup)="onPageInputKeyUp($event)"
            />
            <span class="ms-2">页</span>
            <button class="btn btn-sm btn-outline-primary ms-2" (click)="goToPage(inputPageNumber)">确定</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div> 

<!-- 库存分布模态框 -->
<div class="modal fade" id="stockDistributionModal" tabindex="-1" aria-labelledby="stockDistributionModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="stockDistributionModalLabel">库存分布详情</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!-- 商品基本信息 -->
        <div class="mb-3 p-3 bg-light rounded">
          <div class="row">
            <div class="col-md-4">
              <strong>货品编号：</strong>{{ selectedItem?.goodsCode || '暂无' }}
            </div>
            <div class="col-md-4">
              <strong>货品名称：</strong>{{ selectedItem?.goodsName || '暂无' }}
            </div>
            <div class="col-md-4">
              <strong>总库存：</strong>{{ selectedItem?.currentStock || 0 }} {{ selectedItem?.unit || '件' }}
            </div>
          </div>
        </div>
        
        <!-- 库存分布视觉展示 -->
        <div class="mb-4">
          <h6 class="mb-3">仓库库存分布图</h6>
          <div class="d-flex justify-content-center">
            <!-- 简易图形化展示 -->
            <div class="distribution-chart">
              <div class="d-flex" style="height: 30px;">
                <div *ngFor="let distribution of stockDistributions; let i = index"
                     [ngClass]="{'bg-success': i % 3 === 0, 'bg-info': i % 3 === 1, 'bg-warning': i % 3 === 2, 'bg-primary': i % 3 === 3}"
                     [style.width.%]="distribution.percentage"
                     [title]="distribution.warehouseName + ': ' + distribution.quantity + '件 (' + distribution.percentage + '%)'">
                </div>
              </div>
              <div class="d-flex mt-2 flex-wrap">
                <div *ngFor="let distribution of stockDistributions; let i = index" class="me-3 mb-2">
                  <span class="badge" [ngClass]="{'bg-success': i % 3 === 0, 'bg-info': i % 3 === 1, 'bg-warning': i % 3 === 2, 'bg-primary': i % 3 === 3}">
                    {{ distribution.warehouseName }}
                  </span>
                  <span class="ms-1">{{ distribution.quantity }}件 ({{ distribution.percentage }}%)</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 库存分布表格 -->
        <div class="table-responsive">
          <table class="table table-striped table-bordered">
            <thead class="table-light">
              <tr>
                <th>序号</th>
                <th>仓库名称</th>
                <th>库区</th>
                <th>货架号</th>
                <th>库存数量</th>
                <th>库存金额</th>
                <th>占比</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngIf="stockDistributions.length === 0">
                <td colspan="7" class="text-center py-3">暂无库存分布数据</td>
              </tr>
              <tr *ngFor="let distribution of stockDistributions; let i = index">
                <td>{{ i + 1 }}</td>
                <td>{{ distribution.warehouseName }}</td>
                <td>{{ distribution.areaName }}</td>
                <td>{{ distribution.shelfNo }}</td>
                <td>{{ distribution.quantity }}</td>
                <td>{{ distribution.amount | currency:'￥' }}</td>
                <td>
                  <div class="progress">
                    <div class="progress-bar" 
                         [ngClass]="{'bg-success': i % 3 === 0, 'bg-info': i % 3 === 1, 'bg-warning': i % 3 === 2, 'bg-primary': i % 3 === 3}"
                         [style.width.%]="distribution.percentage">
                      {{ distribution.percentage }}%
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div> 